<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Top Navigation -->
    <nav class="bg-white shadow-sm fixed w-full z-50">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-14 md:h-16 items-center">
          <div class="text-lg md:text-xl font-bold">GAK</div>
          <!-- <div class="flex items-center space-x-2 md:space-x-4">
            <div class="relative hidden md:block">
              <input type="text" placeholder="Search Products" class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500 text-sm" />
              <el-icon class="absolute left-3 top-2.5 text-gray-400"><Search /></el-icon>
            </div>
            <el-icon class="text-xl md:text-2xl cursor-pointer"><ShoppingCart /></el-icon>
          </div> -->
        </div>
      </div>
    </nav>

    <!-- Main Content Area -->
    <main class="pt-14 md:pt-16 max-w-7xl mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 py-4 md:py-8">
        <!-- Product Images Left -->
        <div>
          <swiper :modules="swiperModules" :slides-per-view="1" :pagination="{ clickable: true }" :autoplay="{ delay: 3000 }" :observer="true" :observeParents="true" :preloadImages="true" :watchSlidesProgress="true" :effect="'fade'" :speed="3000" :loop="true" :updateOnWindowResize="true" :resistanceRatio="0" class="product-swiper rounded-lg overflow-hidden">
            <swiper-slide v-for="(image, index) in productImages" :key="index">
              <img :src="image" class="w-full h-[300px] md:h-[500px] object-cover object-center" :alt="`Product Image ${index + 1}`" loading="eager" />
            </swiper-slide>
          </swiper>
        </div>

        <!-- Product Information Right -->
        <div class="space-y-4 md:space-y-6 mt-4 md:mt-0">
          <h1 class="text-xl md:text-2xl font-bold">{{ productNameDetail }}</h1>

          <!-- Product Features -->
          <div class="border-t pt-4 md:pt-6">
            <h3 class="text-base md:text-lg font-medium mb-3 md:mb-4">Product Features</h3>
            <div class="text-sm md:text-base font-medium whitespace-pre-wrap">{{ productFeatures }}</div>
          </div>

          <!-- Button Group -->
          <!-- <div class="flex space-x-3 md:space-x-4">
            <button class="flex-1 bg-red-600 text-white py-2 md:py-3 text-sm md:text-base !rounded-button hover:bg-red-700">Buy Now</button>
            <button class="flex-1 border border-red-600 text-red-600 py-2 md:py-3 text-sm md:text-base !rounded-button hover:bg-red-50">Add to Cart</button>
          </div> -->
        </div>
      </div>

      <!-- Detail Tabs -->
      <el-tabs class="my-4 md:my-8">
        <el-tab-pane label="Product Details">
          <div class="space-y-4 md:space-y-6">
            <img v-for="item in detailImages" :src="item.url" :key="item.uid" :alt="item.name" class="w-full rounded-lg" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
import { Search, ShoppingCart, Check } from "@element-plus/icons-vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";

const swiperModules = [Pagination, Autoplay];
const productImages = ref([]);
const productNameDetail = ref("");
const productFeatures = ref("");
const detailImages = ref([]);

onMounted(() => {
  console.log("加载完");
  try {
    const productData = JSON.parse(localStorage.getItem("productData"));
    console.log("产品信息", productData);
    const extrajson = JSON.parse(productData.extrajson);
    console.log("额外信息", extrajson);
    productImages.value = extrajson.mainImages?.map(item => item.url);
    productNameDetail.value = extrajson.productNameDetail;
    productFeatures.value = extrajson.productFeatures;
    detailImages.value = extrajson.detailImages;
    console.log("产品图片", productImages.value);
  } catch (error) {
    console.log("获取产品信息失败", error);
  }
});

const detailImage1 = "https://ai-public.mastergo.com/ai/img_res/53d04343283651171f32d793c0198922.jpg";
const detailImage2 = "https://ai-public.mastergo.com/ai/img_res/11654d3707d64a29edbb80e91d60ff87.jpg";

const selectedModel = ref("LHR 21III");
const quantity = ref(1);
const models = ["LHR 21III", "LHR 15III", "LHR 75III"];

const features = ["Innovative ergonomic design reduces user fatigue", "Next-generation brushless motor technology provides sustained stable power output", "Smart temperature control system extends tool life", "Adjustable speed control adapts to different polishing needs", "Equipped with LED work light for improved operation visibility"];

const specifications = [
  { label: "Product Model", value: "RUPES BigFoot MK III LHR 21III" },
  { label: "Polishing Pad Diameter", value: "150mm / 180mm optional" },
  { label: "Orbit Diameter", value: "21mm" },
  { label: "Power", value: "500W" },
  { label: "Weight", value: "2.7kg" },
  { label: "Speed Range", value: "3000-5200 RPM" },
];

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const increaseQuantity = () => {
  quantity.value++;
};
</script>

<style scoped>
.product-swiper {
  height: 300px;
  width: 100%;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  text-align: center;
  background: #fff;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .product-swiper {
    height: 500px;
  }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
